<template>
  <div class="bread-container">
    <a-breadcrumb v-if="crumbList[0]">
      <a-breadcrumb-item>{{ t('crumb.index') }}</a-breadcrumb-item>
      <a-breadcrumb-item v-for="item in crumbList" :key="item">
        {{ t(`crumb.${item}`) }}
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script lang="ts" setup>
  import { watch, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useI18n } from 'vue-i18n';
  import type { Ref } from 'vue';

  const { t } = useI18n();
  console.log(t, 't');
  let crumbList: Ref<string[]> = ref([]);
  const router = useRouter();
  [, ...crumbList.value] = router.currentRoute.value.path.split('/');
  watch(
    () => router,
    (value) => {
      [, ...crumbList.value] = value.currentRoute.value.path.split('/');
      console.log(crumbList);
    },
    { deep: true }
  );
</script>

<style scoped lang="less">
  .bread-container {
    background: #eceff9;
    padding: 10px;
  }
</style>
